<template>
<div :class="[$style.container]">
<el-dialog title="锁定文件" :visible.sync="visible" width="480px">
  <p class="text-heading">你将锁定文件【{{data && data.name}}】</p>
  <p class="text-secondary">锁定后将阻止其他人更新文件内容</p>
  <el-form size="small" label-position="left" :rules="rules" :model="form" @submit.native.prevent="" ref="fm">
    <el-form-item prop="duration" label="锁定时长">
      <el-select v-model="form.duration">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <span slot="footer">
    <el-button size="small" @click="onCancel" class="px-5">取 消</el-button>
    <el-button size="small" type="primary" @click="onConfirm" :loading="submitting" class="px-5">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>

<script lang="ts">

import { lock } from '@/api/doc'
import { ModalMixins } from '@/mixins'
import { mixins } from 'vue-class-component'
import { Vue, Component, Prop, Emit, Ref } from 'vue-property-decorator'

@Component
export default class DocLockModal extends mixins(ModalMixins) {
  @Ref() fm!: any

  data: any = null

  form = {
    duration: 15
  }

  rules = {
  }

  options = [
    { label: '15分钟', value: 15 },
    { label: '30分钟', value: 30 },
    { label: '1小时', value: 60 },
    { label: '3小时', value: 60 * 3 },
    { label: '1天', value: 60 * 24 },
    { label: '7天', value: 60 * 24 * 7 },
    { label: '30天', value: 60 * 24 * 30 },
    { label: '半年', value: 60 * 24 * 180 }
  ]

  open (data: any) {
    this.data = data
    this.$nextTick(() => {
      if (this.fm) this.fm.resetFields()
      this.form.duration = 15
    })
    return this.init()
  }

  onCancel () {
    this.cancel()
  }

  onConfirm () {
    this.fm.validate().then((valid: boolean) => {
      if (!valid) return
      this.submitting = true
      lock(this.data?.id, this.form.duration).then(data => {
        this.complete(data)
      }).finally(() => {
        this.submitting = false
      })
    })
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

}

</style>
